<template>
  <div>
    <a-drawer
      width="700"
      :maskClosable="false"
      :visible="userData.show"
      direction="rtl"
      @close="handleClose"
    >
      <div slot="title">
        <!-- <i class="el-icon-arrow-left"></i> -->
        <span>{{userData.title}}</span>
      </div>
      
      <el-row style="width:700px;padding-bottom:150px;height:100%;overflow-y:auto">
        <el-col :span="20">
          <el-form
            :model="parames"
            :rules="rules"
            label-position="left"
            ref="parames"
            label-width="94px"
            class="addForm"
            size="small"
          >
            <el-row :gutter="40" style="padding: 0 40px;margin-top:30px">
              <el-col :span="24">
                  <el-form-item label="工号:" prop="workNumber">
                    <el-input :disabled="userData.type=='edit'" v-model="parames.workNumber"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="姓名:" prop="name">
                    <el-input  v-model="parames.name"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="24" v-if="userData.type == 'new'">
                  <el-form-item label="部门:" prop="departmentId">
                    <el-input disabled v-model="parames.departmentName"></el-input>
                  </el-form-item>
              </el-col>
              
              <el-col :span="24">
                  <el-form-item label="性别:" prop="gender">
                    <el-radio v-model="parames.gender" :label="true">男</el-radio>
                    <el-radio v-model="parames.gender" :label="false">女</el-radio>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="身份:" prop="employeeType">
                    <el-radio v-for="(item,index) in userType" :key="index" v-model="parames.employeeType" :label="item.name">{{item.desc}}</el-radio>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="登录账号:" prop="username" class="is-required">
                    <el-input ref="username" v-model="parames.username" @blur="changeUsername"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="24" v-if="userData.type == 'new'">
                  <el-form-item label="密码:" prop="password">
                    <el-input  v-model="parames.password"></el-input>
                  </el-form-item>
              </el-col>
              
              <el-col :span="24">
                  <el-form-item label="手机号码:" prop="mobile">
                    <el-input  v-model="parames.mobile"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="邮箱:" prop="email">
                    <el-input  v-model="parames.email"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="角色:" prop="roleList">
                    <a-tree-select
                      allowClear
                      style="width: 100%"
                      :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                      :treeData="treeData"
                      treeNodeFilterProp="title"
                      placeholder="请选择"
                      treeDefaultExpandAll
                      multiple
                      :treeCheckable="true"
                      v-model="parames.roleList"
                    >
                    </a-tree-select>
                  </el-form-item>
              </el-col>
              <el-col :span="24" v-if="userData.type == 'edit'">
                  <el-form-item label="是否锁死:">
                    <el-switch v-model="parames.allow"></el-switch>
                  </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>

      <div class="from-bottom-box">
        <el-button size="small" type="primary" :loading="loadingBtn" @click="handleSend('1')" v-if="userData.type == 'new'">保存并继续添加</el-button>
        <el-button size="small" type="primary" :loading="loadingBtn" @click="handleSend('2')">保存</el-button>
        <el-button size="small" type="primary" v-if="userData.type == 'edit'" @click="handleEditPassword">修改密码</el-button>
        <el-button size="small" @click="handleClose">取消</el-button>
      </div>
      <!-- <roleTree></roleTree> -->
      <editPassWordDialog :passwordData="passwordData"></editPassWordDialog>
    </a-drawer>
  </div>
</template>

<script>
import roleTree from './roleTree'
import editPassWordDialog from './editPassword'
export default {
  props: ["userData"],
  data() {
    return {
      treeData: [],
      userType: [],
      loadingBtn: false,
      parames: {
        workNumber: '', //工号
        id: '', //用户id
        name: '', //姓名
        gender: true, //性别（布尔值）
        mobile: '', //手机号码,
        email: '', //邮箱地址,
        username: '', //用户名,
        password: '', //密码,
        employeeType: '', //身份
        departmentId: '' , //部门ID
        departmentName: '',
        allow: true,
        roleList: [], //角色
      },
      passwordData: {
        userId: '',
        show: false
      },
      usernameState: true,
      rules: {
        workNumber: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        name: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        username: [{validator: (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入用户名'))
          } else if (!this.usernameState){
            callback(new Error('此用户名不可用，请重新输入！'))
          } else {
            callback()
          }
        }, trigger: ["blur"]}],
        password: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        mobile: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        email: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        departmentId: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        position: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        gender: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        employeeType: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        roleList: [{ required: true, message: "必填", trigger: ["blur","change"] }],
      },
    };
  },
  components: {
    roleTree,
    editPassWordDialog
  },
  mounted() {},
  methods: {
    addUser () { //添加新成员
      this.searchData.show = true
    },
    changeUsername () {
      this.$post(this.$api.postProviderPersonelUpdateUsernameAvailable,{
        username: this.parames.username
      }).then(response => {
          if (response.data.succeed) {
            this.usernameState = response.data.data.available
            this.$refs.parames.validateField('username');
          }
        })
    },
    handleClose() {
      //关闭弹窗
      this.userData.show = false;
    },
    handleEditPassword () { //修改密码弹窗
      this.passwordData.userId = this.userData.id
      this.passwordData.show = true
    },
    handleSend (type) { //提交信息
      this.$refs['parames'].validate((valid) => {
        if (valid) {
          this.parames.departmentId = this.userData.departmentId
          this.parames.departmentName = this.userData.departmentName
          this.loadingBtn = true
          if (this.userData.type == 'new') {
            this.$post(this.$api.postProviderPersonelAdd,this.parames).then(response => {
              if (response.data.succeed) {
                this.$emit('checkUser')
                if (type == '2') {
                  this.handleClose()
                } else {
                  this.restData()
                }
              }
            })
          } else if (this.userData.type == 'edit') {
            this.parames.allow = !this.parames.allow
            this.$post(this.$api.postProviderPersonelEdit,this.parames).then(response => {
              if (response.data.succeed) {
                this.$emit('checkUser')
                this.handleClose()
              }
            })
          }
          setTimeout(() => {
            this.loadingBtn = false
          }, 300);
        } 
      })
    },
    handleEdit () {
      this.editData.show = true
    },
    
    getTree() { //获取树
      this.$post(this.$api.postProviderPersonelRoleQueryList).then(response => {
        if (response.data.succeed) {
          this.treeData = []
          if (response.data.data.length > 0) {
            response.data.data.forEach(el=>{
              this.getData(el)
              if (el.providerName) {
                this.treeData.push(el)
              }
            })
          }
        }
      })
    },
    getData(data) { //处理树数据
      if (data.providerName) {
        data.title = data.providerName
        data.value = data.providerId
        data.key = data.providerId //
        data.disabled = true
      } else {
        data.title = data.roleName
        data.key = data.id //
        data.value = data.id
      }
      data.scopedSlots = { title: 'title', key: 'key' }
      if (data.roleVoList && data.roleVoList.length > 0) {
        data.children = data.roleVoList
        for(var i = 0; i < data.children.length; i++) {
          this.getData(data.children[i])
        }
      }
    },
    render () {
      if (this.userData.type == 'new') {
        this.parames.departmentId = this.userData.departmentId
        this.parames.departmentName = this.userData.departmentName
      } else if (this.userData.type == 'edit') {
        this.$post(this.$api.postProviderPersonelFind,{
          userId: this.userData.id
        }).then(response => {
          if (response.data.succeed) {
            let data = response.data.data
            this.parames.workNumber = data.workNumber
            this.parames.id = data.id
            this.parames.name = data.name //姓名
            this.parames.gender = data.gender //性别（布尔值）
            this.parames.mobile = data.mobile //手机号码
            this.parames.email = data.email //邮箱地址
            this.parames.username = data.username //用户名
            this.parames.password = data.password //密码
            this.parames.departmentId = data.departmentId
            this.parames.departmentName = this.userData.departmentName
            this.parames.roleList = data.roleList
            this.parames.allow = !data.allow
            if (data.employeeType) {
              this.parames.employeeType = data.employeeType.name //身份
            }
          }
        })
      }
    },
    restData () { //重置数据
      this.parames.id = '' //用户id
      this.parames.name = '' //姓名
      this.parames.gender = true //性别（布尔值）
      this.parames.mobile = '' //手机号码
      this.parames.email = '' //邮箱地址
      this.parames.username = '' //用户名
      this.parames.password = '' //密码
      this.parames.employeeType = 'ORDINARY_EMPLOYEE' //身份
      this.parames.allow = true
      this.parames.roleList = [] //角色
      this.$refs.parames.resetFields()
    }
  },
  computed: { //计算属性
    changeDialog () {
      return this.userData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.$utils.getEnumberation('postProviderPersonelEmloyeetype','userType',this) //成员类型
          this.getTree()
          this.render()
        } else {
          this.restData()
        }
      }
    },
    deep: true
  }
};
</script>

<style scoped>
</style>
